<template>
    <div class="personIndexSetOp">
        <el-breadcrumb separator="/" class="bread-title">
            <el-breadcrumb-item>标准管控</el-breadcrumb-item>
            <el-breadcrumb-item>标准管理</el-breadcrumb-item>
            <el-breadcrumb-item :to="{ path: '/expandCustomerIndexSet' }">拓客指标设置</el-breadcrumb-item>
            <el-breadcrumb-item :to="{
             path: '/personIndexSet',
             query:{
                areaId:ruleForm.areaId,
                areaName:ruleForm.areaName,
                regionId:ruleForm.regionId,
                regionName:ruleForm.regionName,
                year:ruleForm.year,
                standardType:ruleForm.standardType,
                }}">{{ruleForm.areaName}}</el-breadcrumb-item>
            <el-breadcrumb-item>{{pageType=='add'?'新增':'编辑'}}</el-breadcrumb-item>
        </el-breadcrumb>
        <h3>目标设置</h3>
        <el-form :model="ruleForm" label-width="100px" class="demo-ruleForm no-margin-bottom">
            <el-form-item label="年度：">
                {{ruleForm.year}}
            </el-form-item>
            <el-form-item label="区域：">
                {{ruleForm.areaName}}
            </el-form-item>
            <el-form-item label="片区：">
                {{ruleForm.regionName}}
            </el-form-item>
            <el-form-item label="指标：">
                {{ruleForm.standardType==1?'拜访量':'拓客量'}}
            </el-form-item>
            <el-form-item label="人员：" required v-if="pageType=='add'">
                <el-select v-model="ruleForm.userId" @change="userChange">
                    <el-option v-for="item in userList" :key="item.userId" :value="item.userId" :label="item.userName+' '+item.userPhone"></el-option>
                </el-select>
            </el-form-item>
            <el-form-item label="人员：" v-else>
                {{ruleForm.userName}} {{ruleForm.phone}}
            </el-form-item>
        </el-form>

        <h3>指标设置</h3>
        <div class="target-set">
            <div class="target-item"><label>汇总指标值：</label><el-input v-model="ruleForm.summary" @input.native="ruleForm.summary=ruleForm.summary.replace(/\D/,'')" :disabled="yearDisabled" maxlength="10"></el-input></div>
            <div class="target-item"></div>
            <div class="target-item"></div>
        </div>
        <div class="target-set">
            <div class="target-item"><label>1月：</label><el-input v-model="ruleForm.january" @input.native="ruleForm.january=ruleForm.january.replace(/\D/,'')" :disabled="inputDisabled[0]" maxlength="10"></el-input></div>
            <div class="target-item"><label>2月：</label><el-input v-model="ruleForm.february" @input.native="ruleForm.february=ruleForm.february.replace(/\D/,'')" :disabled="inputDisabled[1]" maxlength="10"></el-input></div>
            <div class="target-item"><label>3月：</label><el-input v-model="ruleForm.march" @input.native="ruleForm.march=ruleForm.march.replace(/\D/,'')" :disabled="inputDisabled[2]" maxlength="10"></el-input></div>
            <div class="target-item"><label>4月：</label><el-input v-model="ruleForm.april" @input.native="ruleForm.april=ruleForm.april.replace(/\D/,'')" :disabled="inputDisabled[3]" maxlength="10"></el-input></div>
        </div>
        <div class="target-set">
            <div class="target-item"><label>5月：</label><el-input v-model="ruleForm.may" @input.native="ruleForm.may=ruleForm.may.replace(/\D/,'')" :disabled="inputDisabled[4]" maxlength="10"></el-input></div>
            <div class="target-item"><label>6月：</label><el-input v-model="ruleForm.june" @input.native="ruleForm.june=ruleForm.june.replace(/\D/,'')" :disabled="inputDisabled[5]" maxlength="10"></el-input></div>
            <div class="target-item"><label>7月：</label><el-input v-model="ruleForm.july" @input.native="ruleForm.july=ruleForm.july.replace(/\D/,'')" :disabled="inputDisabled[6]" maxlength="10"></el-input></div>
            <div class="target-item"><label>8月：</label><el-input v-model="ruleForm.august" @input.native="ruleForm.august=ruleForm.august.replace(/\D/,'')" :disabled="inputDisabled[7]" maxlength="10"></el-input></div>
        </div>
        <div class="target-set">
            <div class="target-item"><label>9月：</label><el-input v-model="ruleForm.september" @input.native="ruleForm.september=ruleForm.september.replace(/\D/,'')" :disabled="inputDisabled[8]" maxlength="10"></el-input></div>
            <div class="target-item"><label>10月：</label><el-input v-model="ruleForm.october" @input.native="ruleForm.october=ruleForm.october.replace(/\D/,'')" :disabled="inputDisabled[9]" maxlength="10"></el-input></div>
            <div class="target-item"><label>11月：</label><el-input v-model="ruleForm.november" @input.native="ruleForm.november=ruleForm.november.replace(/\D/,'')" :disabled="inputDisabled[10]" maxlength="10"></el-input></div>
            <div class="target-item"><label>12月：</label><el-input v-model="ruleForm.december" @input.native="ruleForm.december=ruleForm.december.replace(/\D/,'')" :disabled="inputDisabled[11]" maxlength="10"></el-input></div>
        </div>

        <div v-if="pageType=='edit'">
            <h4>操作记录</h4>
            <el-table :data="logs" border>
                <el-table-column type="index" label="序号" width="50"></el-table-column>
                <el-table-column prop="standardDetail" label="调整指标"></el-table-column>
                <el-table-column prop="createTime" label="时间"></el-table-column>
                <el-table-column prop="operating" label="操作"></el-table-column>
                <el-table-column prop="userName" label="姓名"></el-table-column>
            </el-table>
        </div>

        <div class="set-btn">
            <el-button @click="cancelHandle">取消</el-button>
            <el-button type="primary" @click="submitHandle">保存</el-button>
        </div>

    </div>
</template>

<script>

export default {
    name:"personIndexSetOp",
    created() {
        this.pageType = this.$route.query.type
        this.ruleForm.areaId = this.$route.query.areaId
        this.ruleForm.areaName = this.$route.query.areaName
        this.ruleForm.regionId = this.$route.query.regionId
        this.ruleForm.regionName = this.$route.query.regionName
        this.ruleForm.standardType = this.$route.query.standardType
        this.ruleForm.year = this.$route.query.year
        this.$axios.post('/spread/api/companystores/getDistributionUser',{regionId:this.ruleForm.regionId}).then(res=>{
            this.userList = res
        })
        if(this.pageType=='edit'){
            this.$axios.post('/spread/standard/getData',{id:this.$route.query.id}).then(res=>{
                this.ruleForm = Object.assign(this.ruleForm,res)
                this.logs = res.spreadStandardLogList
            })
        }

        const now = new Date()
        if(this.ruleForm.year==now.getFullYear()){
            for(let i=0; i<12;i++){
                const month = now.getMonth()
                if(i<month){
                    this.inputDisabled.push(true)
                }else{
                    this.inputDisabled.push(false)
                }
            }
        }else if(this.ruleForm.year > now.getFullYear()){
            for(let i=0; i<12;i++){
                this.inputDisabled.push(false)
            }
        } else {
            this.yearDisabled = true
            for(let i=0; i<12;i++){
                this.inputDisabled.push(true)
            }
        }
    },
    mounted() {},
    components: {},
    data() {
        return {
            inputDisabled: [],
            pageType:'',
            userList: [],
            ruleForm:{
                rangeType: 2,
                year: undefined,
                areaId: undefined,
                areaName: '',
                regionId: undefined,
                regionName: '',
                standardType: undefined,
                userId: '',
                userName: '',
                phone: '',
                summary: 0,
                january: 0,
                february: 0,
                march: 0,
                april: 0,
                may: 0,
                june: 0,
                july:0,
                august: 0,
                september: 0,
                october: 0,
                november: 0,
                december: 0
            },
            logs: [],
        }
    },
    methods: {
        userChange(val){
            let user = this.userList.find(item =>{
                return item.userId == val
            })
            if(user){
                this.ruleForm.userId = user.userId
                this.ruleForm.userName = user.userName
                this.ruleForm.phone = user.userPhone
            }
        },
        submitHandle(){
            if(this.pageType=='add' && this.ruleForm.userId==''){
                this.$message.info('请选择人员')
                return
            }
            if((this.ruleForm.summary || this.ruleForm.summary===0)
                && (this.ruleForm.january || this.ruleForm.january===0)
                && (this.ruleForm.february || this.ruleForm.february===0)
                && (this.ruleForm.march || this.ruleForm.march===0)
                && (this.ruleForm.april || this.ruleForm.april===0)
                && (this.ruleForm.may || this.ruleForm.may===0)
                && (this.ruleForm.june || this.ruleForm.june===0)
                && (this.ruleForm.july || this.ruleForm.july===0)
                && (this.ruleForm.august || this.ruleForm.august===0)
                && (this.ruleForm.september || this.ruleForm.september===0)
                && (this.ruleForm.october || this.ruleForm.october===0)
                && (this.ruleForm.november || this.ruleForm.november===0)
                && (this.ruleForm.december || this.ruleForm.december===0)
            ){
                if(this.pageType=='add'){
                    this.$axios.post('/spread/standard/save',this.ruleForm).then(res=>{
                        this.$message.success('保存成功')
                        this.$router.push({path: '/personIndexSet',query:{
                                areaId:this.ruleForm.areaId,
                                areaName:this.ruleForm.areaName,
                                regionId:this.ruleForm.regionId,
                                regionName:this.ruleForm.regionName,
                                year:this.ruleForm.year,
                                standardType:this.ruleForm.standardType,
                            }
                        })
                    })
                } else {
                    this.$axios.post('/spread/standard/update',this.ruleForm).then(res=>{
                        this.$message.success('保存成功')
                        this.$router.push({path: '/personIndexSet',query:{
                                areaId:this.ruleForm.areaId,
                                areaName:this.ruleForm.areaName,
                                regionId:this.ruleForm.regionId,
                                regionName:this.ruleForm.regionName,
                                year:this.ruleForm.year,
                                standardType:this.ruleForm.standardType,
                            }
                        })
                    })
                }


            } else {
                this.$message.info('请设置指标')
            }
        },
        cancelHandle(){
            this.$router.back()
        }
    },
    computed: {}
}
</script>
<style lang="stylus" scoped>
    .personIndexSetOp {
        h3{
            border-bottom: 1px solid #ccc;
        }
        .selectWidth{
            width: 220px;
        }
        .target-set{
            display: flex;
            margin-bottom: 10px;
            padding-right: 20px;
            .target-item{
                flex: 1
                display: flex;
                label{
                    width: 120px;
                    line-height: 40px;
                    text-align: right;
                }
            }
        }
        .set-btn{
            margin: 20px 20px 0 0;
            text-align:right;
        }
    }
</style>
<style>
    .personIndexSetOp .no-margin-bottom .el-form-item{
        margin-bottom: 0;
    }
</style>
